<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="维修标题" prop="repairTitle">
            <el-input v-model="ruleForm.repairTitle" />
        </el-form-item>
        <el-form-item label=" 维修类型" prop="repairType">
            <el-input v-model="ruleForm.repairType" />
        </el-form-item>
        <el-form-item label="车牌号" prop="repairBrand">
            <el-input v-model="ruleForm.repairBrand" />
        </el-form-item>
        <el-form-item label="维修金额" prop="repairPrice">
            <el-input v-model="ruleForm.repairPrice" />
        </el-form-item>
        <el-form-item label="维修负责人" prop="repairName">
            <el-input v-model="ruleForm.repairName" />
        </el-form-item>
        <el-form-item label="维修描述" prop="repairDesc">
            <el-input v-model="ruleForm.repairDesc" />
        </el-form-item>
        <el-form-item label="维修日期" prop="repairTime">
            <el-date-picker v-model="ruleForm.repairTime" type="date" aria-label="Pick a date" placeholder="Pick a date"
                style="width: 100%" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="备   注" prop="repairRemark">
            <el-input v-model="ruleForm.repairRemark" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                添加
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'

const ruleForm = reactive({
    "repairTitle": "",
    "repairType": "",
    "repairBrand": "",
    "repairPrice": "",
    "repairName": "",
    "repairDesc": "",
    "repairTime": "",
    "repairRemark": "",
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    repairTitle: [
        { required: true, message: '维修标题不能为空', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    repairType: [
        { required: true, message: '维修类型不能为空', trigger: 'change', },
    ],
    repairBrand: [
        { required: true, message: '车牌号不能为空', trigger: 'change', },
    ],
    repairPrice: [
        { required: true, message: '维修金额不能为空', trigger: 'change', },
    ],
    repairName: [
        { required: true, message: '维修负责人不能为空', trigger: 'change', },
    ],
    repairDesc: [
        { required: true, message: '维修描述不能为空', trigger: 'change', },
    ],
    repairTime: [
        { required: true, message: '维修时间不能为空', trigger: 'change', },
    ],
    repairRemark: [
        { required: true, message: '备注不能为空', trigger: 'change', },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post("/Maintent/api/Maintain/AddRepair", ruleForm)
                .then(res => {
                    if (res.data.data > 0) {
                        ElMessage.success("添加成功")
                        router.push({
                            name: "RepairShow"
                        })
                    }
                    else {
                        ElMessage.error("添加失败")
                    }
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}



</script>